<html ng-app="app">

<head>
    <base href="/">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="hi@hi-hi.cn">

    <script src="./bower_components/angular/angular.min.js"></script>
    <script src="./bower_components/fastclick/lib/fastclick.js"></script>
    <link href="./css/flex.css" rel="stylesheet">
    <link href="./app.css" rel="stylesheet">
    <script src="./app.js"></script>
</head>

<body ng-controller="mainCtrl">
    <div class='app'>
        <div class='container'>
            <div class="page">
                <div class='top' flex="main:justify">
                    <div class='last button-animate' ng-click="exec({type:'KeyTap', key:'left'})">
                        <img src="img/up-button.svg" />
                    </div>
                    <div class="menu button-animate" ng-click="show_menu=!show_menu">
                        <img src="img/menu-button.svg" />
                    </div>
                </div>
                <div class='middle middle-1' ng-if="show_menu">
                    <div class='pie-list'>
                        <div class="pie" id='pie-1' ng-click="exec({type:'KeyTap', key:'audio_vol_up'})">
                            <img class="img-volume-add" src="img/volume-add.svg" />
                        </div>
                        <div class="pie" id='pie-2' ng-click="exec({type:'KeyTap', key:'right'})">
                            <img class="img-pie" src="img/pie.svg" />
                        </div>
                        <div class="pie" id='pie-3' ng-click="exec({type:'KeyTap', key:'audio_vol_down'})">
                            <img class="img-volume-sub" src="img/volume-sub.svg" />
                        </div>
                        <div class="pie" id='pie-4' ng-click="exec({type:'KeyTap', key:'left'})">
                            <img class="img-pie" src="img/pie.svg" />
                        </div>
                    </div>
                    <div class="circle"></div>
                </div>
                <div class="middle middle-2 button-animate" ng-click="exec({type:'KeyTap', key:'right'})" ng-if="!show_menu">
                    <div class='icon-hack'>
                        <svg width="22px" height="9px" viewBox="0 0 22 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polyline class="up-button" points="0 7.71010795 10.7631579 1 22 8"></polyline>
                            </g>
                        </svg>
                    </div>

                </div>
                <div class="bottom" flex="main:justify" ng-if="show_menu">
                    <div class='button-animate' ng-click="exec({type:'TypeString', key:'b'})">黑屏</div>
                    <div class='button-animate' ng-click="exec({type:'TypeString', key:'w'})">白屏</div>
                    <div class='button-animate' ng-click="exec({type:'KeyTap', key:'enter', modifier:['command'] }) || exec({type:'KeyTap', key:'p', modifier:['command', 'alt'] })">播放</div>
                    <div class='button-animate' ng-click="exec({type:'KeyTap', key:'escape'})">退出</div>
                </div>
            </div>
        </div>
        <div class="sidebar-section">
            <div class="section-detail">
                <p class="text-center shop-detail"><strong>扫码玩起来</strong></p>
                <p class="text-center qr-code">
                    <img width="140" height="140" ng-if="show_qrcode" ng-src="{{qrcode_src}}">
                </p>
            </div>
        </div>
    </div>

    <div style="display: none">
        <div>app_id: {{app_id}}</div>
        <button class="btn btn-default" type="button" ng-click="exec({type:'KeyTap', key:'escape'})">esc</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'KeyTap', key:'down'})">down</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'KeyTap', key:'up'})">up</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'KeyTap', key:'audio_mute'})">audio_mute</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'KeyTap', key:'audio_vol_down'})">audio_vol_down</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'KeyTap', key:'audio_vol_up'})">audio_vol_up</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'KeyTap', key:'enter', modifier:['command', 'shift'] })">从头播放</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'KeyTap', key:'enter', modifier:['command'] })">当前页面开始播放</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'TypeString', key:'b'})">黑屏</button>
        <button class="btn btn-default" type="button" ng-click="exec({type:'TypeString', key:'w'})">白屏</button>
    </div>
</body>

</html>